<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>消息</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<link type="text/css" rel="stylesheet" href="/static/css/common.css">
		<link type="text/css" rel="stylesheet" href="/static/css/hbstyle.css">
		<link type="text/css" rel="stylesheet" href="/static/css/ycstyle.css">
		<script type="text/javascript" src="/static/js/jquery.min.js"></script>
		<script type="text/javascript">
            $(document).ready(function(){
                //创建一个socket实例
                var socket 		= null; //初始为null
                var userId      = "{$userId}";
                var userName    = "{$userName}";
                socket = new WebSocket("ws://127.0.0.1:8282");
                socket.onmessage = function (ev) {
                    // ev为返回数据，返回的数据为json
					// 根据返回type的数据类型，判断需要完成的工作

                    var message = JSON.parse(ev.data);

                    switch (message.type){
						case 'init':
						    alert(1);
							var num = "123";
							socket.send(num); //将需要绑定的用户信息发送给服务端，去onMessage去绑定
							console.log(ev);
					}

                }
                $(".hb-xiaoxi-dibu-1").click(function () {
                    var talk_message = $('#talk_message').val(); //获取输入框内容
                    socket.send(talk_message); //发送信息给服务器
                    $('#talk_message').val(''); //清空输入框
                    // 将数据呈现到页面中

                })
            });


		</script>
	</head>

	<body>



<div class="hb-xiaoxi-top hb-flex2">
	<div class="hb-xiaoxi-touxiang"><img src="/static/images/hb-xiaoxi.jpg"></div>
	<div class="hb-xiaoxi-top-title"><h5>销售管家</h5>
	<span>暂无消息</span></div>
</div>


<div class="hb-xiaoxi-list">
	<div class="hb-xiaoxi-touxiang"><img src="/static/images/hb-touxiang2.jpg"><span class="hb-red-point">1</span></div>
	<div class="hb-xiaoxi-list-title">
			<div class="hb-xiaoxi-list-name">
			<h5>大鑫</h5>
			<span>再来一条</span>			</div>
			
			<span class="hb-xiaoxi-list-time">11:20</span>	</div>
	</div>	

<!--dibu-->
<div class="hb-footer-height"></div>
	<footer class="hb-footer">
            <div class="hb-footer-nr">
			<a href="" class="hb-footer-alink" >
                    <span class="hb-footer-icon hb-footer-icon-01"> </span>
                <span class="hb-footer-text">雷达</span>
				</a>
            <a href=""  class="hb-footer-alink-active">
                    <span class="hb-footer-icon hb-footer-icon-02-active"><span class="hb-footer-point">1</span></span>
                <span class="hb-footer-text">消息</span>            </a>
            <a href=""  class="hb-footer-alink">
                    <span class="hb-footer-icon hb-footer-icon-03">                    </span>
                <span class="hb-footer-text">通讯录</span>
				</a>
            <a href=""  class="hb-footer-alink">
                 <span class="hb-footer-icon hb-footer-icon-04"><span class="hb-footer-point">3</span>                    </span>
                <span class="hb-footer-text">工作</span>            </a>
            <a href=""  class="hb-footer-alink">
                    <span class="hb-footer-icon hb-footer-icon-05">                    </span>
            <span class="hb-footer-text">我的</span>            </a></div>
        </footer>	
	<!--dibu-->	
	</body>
</html>